// v-if 和 v-show 区分使用场景

//         computed 和 watch  区分使用场景

//         v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

//         长列表性能优化

//         事件的销毁 addEventlisenter 事件监听

//         图片资源懒加载

//         路由懒加载

//         第三方插件的按需引入

//         优化无限列表性能

//         服务端渲染 SSR or 预渲染

// Webpack 层面的优化

//         Webpack 对图片进行压缩

//         减少 ES6 转为 ES5 的冗余代码

//         提取公共代码

//         模板预编译

//         提取组件的 CSS

//         优化 SourceMap

//         构建结果输出分析

//         Vue 项目的编译优化

// 基础的 Web 技术的优化

//         开启 gzip 压缩

//         浏览器缓存

//         CDN 的使用

//         使用 Chrome Performance 查找性能瓶颈

// 尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcher
// v-if 和 v-for 不能连用
// 如果需要使用 v-for 给每项元素绑定事件时使用事件代理
// SPA 页面采用 keep-alive 缓存组件
// 在更多的情况下，使用 v-if 替代 v-show
// key 保证唯一
// 使用路由懒加载、异步组件
// 防抖、节流
// 第三方模块按需导入
// 长列表滚动到可视区域动态加载
// 图片懒加载
// SEO 优化

// 预渲染
// 服务端渲染 SSR
// 打包优化

// 压缩代码
// Tree Shaking/Scope Hoisting
// 使用 cdn 加载第三方模块
// 多线程打包 happypack
// splitChunks 抽离公共文件
// sourceMap 优化
// 用户体验

// 骨架屏
// PWA
// 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启 gzip 压缩等。